<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>403 Forbidden</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #373740; color: #FFFFFF; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; line-height: 1.6; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; max-width: 1200px; width: 100%; padding: 20px; margin-bottom: 10px; }
.content { max-width: 600px; flex: 1; min-width: 300px; }
.image-container { flex: 1; text-align: center; min-width: 300px; }
h1 { font-size: 80px; color: #F4FFA5; margin: 0; line-height: 1.1; }
h2 { font-size: 30px; margin: 15px 0; }
#tip { margin: 30px 0; color: #cccccc; font-size: 18px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 40px; }
.btn { display: inline-block; padding: 12px 40px; text-align: center; color: #FFFFFF; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.3s, box-shadow 0.3s; font-size: 16px; flex: 1; min-width: 180px; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.btn-home { background-color: #E56E54; }
.btn-contact { background-color: #845E52; }
.error-image { max-width: 100%; height: auto; border-radius: 10px; /*box-shadow: 0 10px 30px rgba(0,0,0,0.3);*/ }
#info { position: fixed; left: 0; bottom: 0; font-size: 12px; padding: 10px; z-index: 1000; /*max-width: calc(100% - 20px);*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .3; background: rgba(0,0,0,0.3); width: 100%; text-align: center; }
/* 响应式设计：平板和手机竖屏模式 */
@media (max-width: 768px) {
.container { flex-direction: column; gap: 30px; }
.content { order: 2; text-align: center; margin-bottom: 30px; }
.image-container { order: 1; margin-top: 20px; }
h1 { font-size: 60px; }
h2 { font-size: 24px; }
#tip { font-size: 16px; margin: 20px 0; }
.btn-group { flex-direction: column; margin-top: 20px; }
.btn { min-width: 100%; }
}
/* 小屏幕手机优化 */
@media (max-width: 480px) {
h1 { font-size: 50px; }
h2 { font-size: 22px; }
.content, .image-container { min-width: 100%; padding: 0 10px; }
.error-image { max-width: 90%; }
#info_id{display:none;}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.content, .image-container { animation: fadeIn 0.8s ease-out forwards; }
.image-container { animation-delay: 0.3s; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>哎呀！</h1>
<h2>这个页面今天有点害羞。</h2>
<div id="tip">
如果您想继续访问，不妨找我们的小编聊聊，或者探索我们网站上其它精彩的页面！
</div>
<div class="btn-group">
<a href="//www.eyuyao.com/" class="btn btn-home">返回首页</a>
<a href="//ad2.eyuyao.com/2015/abouteyuyao/contact.asp" class="btn btn-contact">联系我们</a>
</div>
</div>

<div class="image-container">
<img src="403.png?x-oss-process=image/resize,w_300,m_fixed" alt="403 Forbidden" class="error-image">
</div>
</div>

<div id="info"><span id="info_id">Request ID: </span><span id="info_details"></span></div>

<script>
document.addEventListener('DOMContentLoaded', function () {
const getInfo = () => {
const paramInfo = new URLSearchParams(window.location.search).get('info');
if (paramInfo) {
return decodeURIComponent(paramInfo);
}
return null;
};

const info = getInfo();
if (info) {
const byteArray = new TextEncoder().encode(info);
let binary = '';
byteArray.forEach(byte => binary += String.fromCharCode(byte));
const span = document.getElementById('info_details');
span.textContent = btoa(binary)
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
});
</script>
</body>
</html>